<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>055-百度新闻.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.news-wrap{
			width: 300px;
			margin: 100px auto;
		}
		.hd{
			border-top: 2px solid #ececec;
			border-bottom: 1px solid #ccc;
			padding-bottom: 10px;
		}
		.hd h3{
			width:100px;
			height: 35px;
			line-height:26px;
			border-top: 2px solid #069;
			margin-top: -2px;
			padding-top: 6px;
			font-size: 20px;
			font-weight: 400;
			color: #069;
		}
		.hd h3 .desc{
			display: block;
			line-height: 12px;
			font-size: 9px;
			font-weight: 400;
			color: #999;
		}
		.bd li{
			line-height: 35px;
			border-bottom: 1px dotted #ececec;
		}
		.bd li:last-child{
			border-bottom: none;
		}
		.bd li a{
			font-size: 12px;
			text-decoration: none;
			color: #222;
		}
		.bd li a:hover{
			color: #900;
			text-decoration: underline;
		}
		.bd li:before{
			display: inline-block;
			width: 4px;
			height: 4px;
			background-color: #069;
			content: "";
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="news-wrap">
		<div class="hd">
			<h3>
				即时新闻
				<span class="desc">INSTANT NEWS</span>
			</h3>
		</div>
		<ul class="bd">
			<li>
				<a href="#">消费大国，我国一年猪肉消费量超5000万吨</a>
			</li>	
			<li>
				<a href="#">消费大国，我国一年猪肉消费量超5000万吨</a>
			</li>
			<li>
				<a href="#">消费大国，我国一年猪肉消费量超5000万吨</a>
			</li>
			<li>
				<a href="#">消费大国，我国一年猪肉消费量超5000万吨</a>
			</li>	
			<li>
				<a href="#">消费大国，我国一年猪肉消费量超5000万吨</a>
			</li>
			<li>
				<a href="#">消费大国，我国一年猪肉消费量超5000万吨</a>
			</li>
		</ul>
	</div>
</body>
</html>